import {Image, Text, View} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';

import * as T from '../types';
import './pay-list.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';

import alipay from '../img/alipay.png';
import weapp from '../img/wechat.png';
import bankpay from '../img/bankpay.png';
import balance from '../img/balance.png';
import credit from '../img/credit.png';
import unionpay from '../img/unionpay.png';

import {_} from 'wmkit';
import api from 'api';

import arrow from '@/assets/image/common/arrow.png';

type IPayListProps = T.IProps & T.IPayListProps;
//@ts-ignore
const isH5 = __TARO_ENV === 'h5';
//@ts-ignore
const isWechatShow = __TARO_ENV === 'h5' || __TARO_ENV === 'weapp';
//@ts-ignore
const isAlipayShow = __TARO_ENV === 'h5' || __TARO_ENV === 'alipay';
const unionpayShow = __TARO_ENV === 'h5';
@connect<Partial<IPayListProps>, T.IPayListState>(store2Props, actions)
export default class PayList extends Component<Partial<IPayListProps>, T.IPayListState> {
  constructor(props: IPayListProps) {
    super(props);
  }

  /**

   */
  render() {
    let {
      actions: {action},
      main: {
        balance: {balancMoney},
        payInfo,
        credit: {alias, usableAmount},
      },
    } = this.props;
    const openPayList = payInfo.reduce((a, b) => (b.isOpen && a.push(b.channel), a), []);
    let isWeixin = _.isWeixin();
    return (
      <View className="payList">
        {isWechatShow && Boolean(~openPayList.indexOf('Credit')) && (
          <View
            className="pay-item"
            onClick={async () => {
              const credit = await payInfo.filter((o) => o.channel === 'Credit')[0];
              await action.checkCreditPwdValid(credit.id);
            }}
          >
            <View className="left-pay">
              <Image src={credit} className="pay-icon" />
              <Text className="pay-title">{`${alias}支付`}</Text>
            </View>
            <View className="right-pay">
              <Text className="money-title" decode={true}>
                可用额度&nbsp;
              </Text>
              <Text className="money-num">¥{_.addZero(usableAmount)}</Text>
              <Image src={arrow} className="arrow-icon" />
            </View>
          </View>
        )}

        {isWechatShow && Boolean(~openPayList.indexOf('WeChat')) && (
          <View
            className="pay-item"
            onClick={async () => {
              await this._weChatpay(isWeixin);
            }}
          >
            <View className="left-pay">
              <Image src={weapp} className="pay-icon" />
              <Text className="pay-title">微信支付</Text>
            </View>
            <View className="right-pay">
              <Image src={arrow} className="arrow-icon" />
            </View>
          </View>
        )}

        {isAlipayShow && Boolean(~openPayList.indexOf('Alipay')) && !_.isWeixin() && (
          <View
            className="pay-item"
            onClick={async () => {
              await this._alipay();
            }}
          >
            <View className="left-pay">
              <Image src={alipay} className="pay-icon" />
              <Text className="pay-title">支付宝支付</Text>
            </View>
            <View className="right-pay">
              <Image src={arrow} className="arrow-icon" />
            </View>
          </View>
        )}

        {//企业银联支付
        Boolean(~openPayList.indexOf('unionpay_b2b')) && (
          <View
            className="pay-item"
            onClick={async () => {
              await action.bankPay();
            }}
          >
            <View className="left-pay">
              <Image src={bankpay} className="pay-icon" />
              <Text className="pay-title">银联企业支付</Text>
            </View>
            <View className="right-pay">
              <Image src={arrow} className="arrow-icon" />
            </View>
          </View>
        )}
        {//银联支付
          unionpayShow && Boolean(~openPayList.indexOf('unionpay')) && (
            <View
              className="pay-item"
              onClick={async () => {
                await action.unionPay();
              }}
            >
              <View className="left-pay">
                <Image src={unionpay} className="pay-icon" />
                <Text className="pay-title">银联云闪付</Text>
              </View>
              <View className="right-pay">
                <Image src={arrow} className="arrow-icon" />
              </View>
            </View>
          )}
        {//余额支付
        Boolean(~openPayList.indexOf('Balance')) && (
          <View
            className="pay-item"
            onClick={async () => {
              await action.checkPwdValid();
            }}
          >
            <View className="left-pay">
              <Image src={balance} className="pay-icon" />
              <Text className="pay-title">余额支付</Text>
            </View>
            <View className="right-pay">
              <Text className="money-title" decode={true}>
                当前余额&nbsp;
              </Text>
              <Text className="money-num">¥{_.addZero(balancMoney)}</Text>
              <Image src={arrow} className="arrow-icon" />
            </View>
          </View>
        )}
      </View>
    );
  }

  _alipay = async () => {
    const action = this.props.actions.action;
    if (isH5) {
      action.zhifubaoPay();
    } else {
    }
  };
  _weChatpay = async (isWeixin) => {
    const action = this.props.actions.action;
    if (isH5) {
      // 普通浏览器内，使用wx_mweb支付
      if (!isWeixin) {
        await action.goToWeixinWebPay();
      } else {
        // 微信浏览器内，使用js_api支付
        await action.getWXPayJSApi();
      }
    } else {
      // 小程序内的支付
      Taro.login({
        async success(res: {code: any | PromiseLike<string>; errMsg: string}) {
          if (res.code) {
            let openid;
            try {
              openid = await api.payController.getLittleProgramOpenId(res.code);
            } catch (e) {
              Taro.showToast({
                title: '功能不可用',
                icon: 'none',
                duration: 2000,
              });
              return;
            }
            await action.goToWeixinPay(openid);
          } else {
            console.log('PayList_获取code失败！' + res.errMsg);
          }
        },
      });
    }
  };
}

//create by moon https://github.com/creasy2010/moon
